<template>
  <m-layout type="primary">
    <div slot="header" >
      <mt-header title="班级学员" >
        <m-header-back slot="left"/>
      </mt-header>
      <div class="search">
        <mt-search v-model="searchVal" @input="search" placeholder="搜索内容"></mt-search>
      </div>
    </div>
    <div slot="body" class="student">
      <m-section :border-top="false" :border-bottom="false">
        <div v-if="list.list && list.list.length > 0">
          <mt-loadmore :bottom-method="loadBottom" ref="loadmore" class="">
            <mt-cell v-for="(item, index) in list.list" :key="index"
              :to="`/smartCourse?studentId=${item.studentId}&idType=teacher`"
              is-link>
              <div slot="title">
                <img :src="item.headPicture || '/static/images/default/avatar.png'" alt="">
                {{item.name}}
              </div>
            </mt-cell>
          </mt-loadmore>
        </div>
        <e-placeholder v-else />
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      list: state => state.grade.student
    })
  },
  data () {
    return {
      searchVal: '',
      params: {
        beginTime: '',
        endTime: '',
        page: 1,
        rows: 10,
        search: '',
        classScheduleId: this.$route.query.id
      }
    }
  },
  methods: {
    search (val) {
      this.params.search = val
      this.params.page = 1
      this.$store.dispatch('grade/student', this.params)
    },
    loadBottom () {
      if (this.params.page < this.list.pages) {
        this.search(this.params.page + 1)
      }
    }
  },
  mounted () {
    this.params.teacherId = this.$route.query.teacherId
    this.params.beginTime = this.$route.query.stime
    this.params.endTime = this.$route.query.etime
    this.search()
  }
}
</script>

<style lang="scss" scoped>
.student{
  img{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }
}
</style>
